import React from 'react';

import './index.scss'
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');

class LineChat extends React.Component {
  componentDidMount() {
    this.initChat()
  }
  initChat() {
    const myChart = echarts.init(document.getElementById('lineChat'));
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            animation: false,
            label: {
                backgroundColor: '#ccc',
                borderColor: '#aaa',
                borderWidth: 1,
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                textStyle: {
                    color: '#222'
                }
            }
        }
    },
    xAxis: [{
      type: "category",
      name: '时间',
      boundaryGap: false,
      data: [0,2,4,6,8,10,12,14,16,18,20,22,24,0,2,4,6,8,10,12,14,16,18,20,22,24],
      splitLine:{show: false},//去除网格线
      splitArea : {show : false},//保留网格区域
      axisLabel: {
        inside: false,
        textStyle: {
          color: "#CCCCCC"
        },
        interval:1,
        //X轴字体旋转
        rotate:0
      },
      // X轴坐标
      axisTick: {
        show: false
      },
      //X轴线设置
      axisLine: {
        show: true,
        type: "solid",
        lineStyle: {
          color: "#cccccc",
          width: "1"
        }
      },
      z: 10
    }],
    yAxis: {
      type: 'value',
      minInterval:1,
      name: '个',
      nameTextStyle: {
          padding: [0, 0, -10, 13]
      },
      // 隐藏Y轴
      axisLine: {
        show: true,
        type: "solid",
        lineStyle: {
          color: "#cccccc",
          width: "1"
        }
      },
      //   隐藏网格线
      splitLine: {
        show: false
      },
      //   隐藏刻度标准
      axisTick: {
        show: false
      },
       z: 10
    },
    series: [{
        symbol: "none",
        data: [3,4,10,40,50,30,22, 22,23,40,2,3,3,4,10,40,50,30,22, 22,23,40,2,3],
        type: 'line',
        smooth: true,
        areaStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#1791FF' // 0% 处的颜色
            },
            {
              offset: 0.5, color: '#072453' // 50% 处的颜色
            },{
              offset: 1, color: '#050B33' // 100% 处的颜色
            }],
          }
        },
        itemStyle: {
          normal: {
            color: "#1791FF",
            label: {
              show: false, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "#F5F5F5",
                fontSize: 12,
              }
            }
          }
        }
    }],
    //控制边距　
    grid: {
      left: '20',
      right:'27',
      top: '40',
      bottom: '10',
      containLabel: true,
    },
    };
    myChart.setOption(option);
  }
  render() {
    return (
      <div className="line-chat" id="lineChat"></div>
    )
  }
}

export default LineChat